<script setup>
import { ref } from "vue";

const x = ref(0)
function onMousemove(e) {
  x.value = e.clientX
}

</script>

<template>
  <div>
    <div @mousemove="onMousemove" :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }" class="move-area">
      <p>Move your mouse across this div...</p>
      <p>x: {{ x }}</p>
    </div>

  </div>
</template>

<style scoped>
.move-area {
  transition: 0.3s background-color ease;
}

</style>